<template>
  <div class="personal">
    <div class="main">
      <div class="top">
        <img class="icon" src="../static/img/wodeshezhi.png" alt="" @click="toSetting">
        <span class="title">我的</span>

        <img class="icon" src="../static/img/message-icon.png" alt="">

      </div>
      <div class="user" v-if="user.name">
        <input type="file" style="display: none;" ref="file" @change="uploadImg">
        <img class="avatar" :src="user.avatar" alt="" @click.stop.prevent="changImg">
        <div class="user-message">
          <p class="name">{{user.name}}</p>
          <p class="jifen">积分</p>
        </div>
        <p class="vip">普通会员</p>
      </div>
      <div class="user" v-if="!user.name">
        <img class="avatar" src="../static/img/me.png" alt="">
        <div class="user-message">
          <p class="name">未登录</p>
        </div>
        <p class="vip" @click="showInfo">请登陆</p>
      </div>
    </div>
    <div class="content">
      <div class="group" @click="toDingDan">
        <img class="icon" src="../static/img/wodedingdan.png" alt="">
        <p class="text">我的订单</p>
        <span class="right">&gt;</span>
      </div>
      <div class="group" @click="toMyTalk">
        <img class="icon" src="../static/img/wodepingjia.png" alt="">
        <p class="text">我的评价</p>
        <span class="right">&gt;</span>
      </div>
      <div class="group">
        <img class="icon" src="../static/img/wodedingzhi.png" alt="">
        <p class="text">我的定制</p>
        <span class="right">&gt;</span>
      </div>
      <div class="group">
        <img class="icon" src="../static/img/wodeshoucang.png" alt="">
        <p class="text">我的收藏</p>
        <span class="right">&gt;</span>
      </div>
      <div class="group">
        <img class="icon" src="../static/img/wodekecheng.png" alt="">
        <p class="text">我的课程</p>
        <span class="right">&gt;</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {Group, Cell, XInput} from 'vux'
  import {getInfo} from "@/api/user"
  import {setData, setToken} from "@/utils/auth"
  import {mapGetters, mapMutations} from 'vuex'

  export default {
    components: {
      Group, Cell, XInput
    },
    data() {
      return {
        type: "1",
        tableBarItem: [],
        results: [],
        autoFixed: false,
      }

    },
    computed: {
      ...mapGetters([
        'user'
      ])
    },
    created() {
      this.$store.dispatch("GetInfo").then((res) => {
        if (res.message == "ok") {
          this.user = res.user[0]
          setData(this.user)
        }
      })
    },
    methods: {
      ...mapMutations([
        'SET_USER'
      ]),
      uploadImg(e) {
        let _this = this
        let f = e.target.files[0]
        let name = new Date().getTime() + '' + f.lastModified + '.' + f.name.substr(-3)
        let file = new Bmob.File(name, f);
        file.save().then(function (obj) {
          let avatar = obj.url()
          let User = Bmob.Object.extend("user");
          let query = new Bmob.Query(User);
          query.find({
            success: function (results) {
              for (let i = 0; i < results.length; i++) {
                if (_this.name = results[i].attributes.name) {
                  query.get(results[i].id, {
                    success: function (gameScore) {
                      // 回调中可以取得这个 GameScore 对象的一个实例，然后就可以修改它了
                      gameScore.set('avatar', avatar);
                      gameScore.save();

                      // The object was retrieved successfully.
                    },
                    error: function (object, error) {

                    }
                  });
                }
              }
            },
            error: function (error) {
              alert("查询失败: " + error.code + " " + error.message);
            }
          });
          _this.SET_USER({name: _this.user.name, avatar: avatar})
        }, function (error) {
          // the save failed.
        });
      },
      changImg() {
        this.$refs.file.click()
      },
      toDingDan() {
        this.$router.push({path: '/user/dingdan'})
      },
      toMyTalk() {
        this.$router.push({path: '/user/mytalk'})
      },
      toSetting() {
        this.$router.push({path: '/setting'})
      },
      login() {
        this.$router.push({path: "/user/login"})
      },
      changeTarbleBar(index) {

        this.tableBarItem = this.tableBarItem.map((item) => {
          item.selected = false
          return item
        })

        this.tableBarItem[index].selected = true
      },
      onCancel: function () {
        this.searchContent = ""
      },
      onSubmit: function () {
      },
      resultClick: function () {

      },
      onImgError: function () {

      },
      showPaper() {
        this.paperShow = true
        this.videoShow = false
      },
      showVideo() {
        this.paperShow = false
        this.videoShow = true
      },
      showInfo() {
        if (this.user) {
          this.$router.push({path: "/user/login"})
        } else {
          this.$router.push({
            path: "/personal/detail"
          })
        }

      },
      getMsg() {
        this.$router.push({
          path: "/personal/message"
        })
      },
      getWork() {
        this.$router.push({
          path: "/user/work"
        })
      }
    }
  }

</script>

<style>
  .personal {
    background: #fff;
  }

  .personal .main {
    background: #06cd56;
    padding: 15px 0;
    margin-bottom: 15px;
  }

  .personal .main .top {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .personal .main .top .icon {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin: 0 15px 0 15px;
  }

  .personal .main .top .title {
    text-align: center;
    flex: 1;
    color: #fff;
  }

  .personal .main .user {
    display: flex;
    align-items: center;
    padding: 15px 0;
  }

  .personal .main .user .avatar {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    margin-left: 15px;
    border-radius: 50%;
  }

  .personal .main .user .user-message {
    flex: 1;
    color: #fff;
    margin-left: 15px;
  }

  .personal .main .user .user-message .jifen {
    font-size: 12px;
  }

  .personal .main .user .vip {
    flex: 20px;
    background: #fff;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    height: 45px;
    color: #06cd56;
    text-align: center;
    line-height: 45px;
  }

  .personal .content {

  }

  .personal .content .group {
    display: flex;
    align-items: center;
    padding: 15px 0;
  }

  .personal .content .group .icon {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    margin: 0 15px;
  }

  .personal .content .group .text {
    flex: 1;
  }

  .personal .content .group .right {
    flex: 0 0 25px;
    font-size: 18px;
    color: #06cd56;
    font-weight: bold;
  }

  .button-tab-class {
    position: relative;
    margin-top: 30px;
  }

  .movie-avatar {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 150px;
  }

  .movie-content-wrapper {
    position: relative;
    display: flex;
    margin-top: 15px;
  }

  .movie-content-wrapper .movie-content {
    flex: 0 0 50%;
  }

  .view-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    color: rgb(100, 100, 100);
    margin-top: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .view-wrapper div {
    flex: auto;
    height: 20px;
    line-height: 20px;
  }

  .split {
    position: relative;
    width: 100%;
    height: 15px;
    background: #f3f5f7;
  }

  .viewIcon {
    vertical-align: top;
    width: 20px;
    height: 20px;
  }

  .praiseIcon {
    vertical-align: top;
    width: 20px;
    height: 20px;
  }

  .movie-title {
    font-size: 22px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin-bottom: 6px;
  }

  .viewText {
    position: relative;
    display: inline-block;
  }
</style>
